<template>
    <view class="h5-container">
      <web-view 
        :src="h5PageUrl" 
        class="webview" 
        @message="handleMessage"
      />
    </view>
  </template>
  
  <script setup lang="ts">
  import Taro from '@tarojs/taro'
  import { onMounted, ref } from 'vue'
  
  const h5PageUrl = ref('https://anfine.huasun-healthcare.com/h5/index.html')
  
  // Handle messages from H5 page
  const handleMessage = (event: any) => {
    // Received message from H5 page
    
    // Extract the message data
    const messageData = event.detail.data
    
    // Process the message
    if (messageData && messageData.length > 0) {
      const data = messageData[0]
      
      if (data.type === 'user_message') {
        // Show a toast with the received message
        Taro.showToast({
          title: `Received: ${data.message}`,
          icon: 'none',
          duration: 3000
        })
        
        // Message from H5
        
        // You can also perform other actions based on the message
        // For example, navigate to another page or update state
      }
    }
  }
  
  onMounted(() => {
    // Set the URL to our H5 page
    // In a real project, this would be your deployed H5 page URL
    // For local development, you might need to adjust this path
    // h5PageUrl.value = `${window.location.origin}/design/h5/index.html`
    
    // If you have a specific page parameter, you can use it
    const params = Taro.getCurrentInstance().router?.params
    if (params?.url) {
      h5PageUrl.value = decodeURIComponent(params.url)
    }
    
    // Loading H5 page
  })
  </script>
  
  <style>
  .h5-container {
    width: 100%;
    height: 100vh;
  }
  
  .webview {
    width: 100%;
    height: 100%;
  }
  </style>